<template>
  <div>
    <section class="main">
      <input
        class="toggle-all"
        id="toggle-all"
        type="checkbox"
        v-model="isCheckAll"
        @change="checkAllClk(isCheckAll)"
      />
      <label for="toggle-all"></label>
      <ul class="todo-list">
        <li
          class="todo"
          :class="{ completed: item.isCheck }"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="view">
            <input
              class="toggle"
              type="checkbox"
              @change="checkChange({ item, index })"
            />
            <label @dblclick="dbTodoClk({ item, index })">{{
              item.text
            }}</label>
            <button
              class="destroy"
              @click="deleteClk({ item, index })"
            ></button>
          </div>
          <input
            v-focus
            class="edi"
            type="text"
            v-model="item.text"
            v-if="item.isIptShow"
            @keydown.enter="xgClk({ item, index })"
            @keydown.esc="escClk({ item, index })"
            @blur="blurChange({ item, index })"
          />
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      isCheckAll: false,
    };
  },
  methods: {
    ...mapActions("todolist", [
      "dbTodoClk",
      "xgClk",
      "escClk",
      "blurChange",
      "checkChange",
      "checkAllClk",
      "deleteClk",
    ]),
  },
  computed: {
    ...mapState("todolist", ["list"]),
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style scoped>
.edi {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  outline: none;
  color: inherit;
  padding: 6px;
  border: 1px solid #999;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
